<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="./layer.js"></script>
<style>
    body {
        margin: 25px;
    }

    .layui-btn {
        margin: 2px;
    }
</style>

<script>


	/*
	//特别说明：事件需自己绑定，以下只展现调用代码。
	//初体验


	//询问框
	layer.confirm('您是如何看待前端开发？', {
	  btn: ['重要','奇葩'] //按钮
	}, function(){
	  layer.msg('的确很重要', {icon: 1});
	}, function(){
	  layer.msg('也可以这样', {
		time: 20000, //20s后自动关闭
		btn: ['明白了', '知道了']
	  });
	});
	//提示层
	layer.msg('玩命提示中');



	});*/

	function aa() {
		layer.confirm('您是如何看待前端开发？', {
			btn: ['重要', '奇葩'] //按钮
		}, function () {
			layer.msg('的确很重要', {icon: 1});
		}, function () {
			layer.msg('也可以这样', {
				time: 20000, //20s后自动关闭
				btn: ['明白了', '知道了']
			});
		});
	}


	$('#chutiyan>a').on('click', function () {
		var othis = $(this), index = othis.index();
		switch (index) {
			case 0:
				var icon = -1;
				(function changeIcon() {
					var index = layer.alert('Hi，你好！ 点击确认更换图标', {
						icon: icon,
						shadeClose: true,
						title: icon === -1 ? '初体验 - layer ' + layer.v : 'icon：' + icon + ' - layer ' + layer.v
					}, changeIcon);
					if (8 === ++icon) layer.close(index);
				}());
				break;
			case 1:
				var icon = 0;
				(function changeIcon1() {
					var index = layer.alert('点击确认更换图标', {
						icon: icon,
						shadeClose: true,
						skin: 'layer-ext-moon',
						title: icon === -1 ? '第三方扩展皮肤' : 'icon：' + icon
					}, changeIcon1);
					if (9 === ++icon) {
						layer.confirm('怎么样，是否很喜欢该皮肤，去下载？', {
							skin: 'layer-ext-moon'
						}, function (index, layero) {
							layero.find('.layui-layer-btn0').attr({
								href: 'http://layer.layui.com/skin.html',
								target: '_blank'
							});
							layer.close(index);
						});
					}
					;
				}());
				break;

			case 2:
				//询问框
				layer.confirm('您是如何看待前端开发？', {
					btn: ['重要', '奇葩'] //按钮
				}, function () {
					layer.msg('的确很重要', {icon: 1});
				}, function () {
					layer.msg('也可以这样', {
						time: 20000, //20s后自动关闭
						btn: ['明白了', '知道了']
					});
				});
				break;


		}


	});
</script>


<div class="clearfix layer-text">
	<fieldset class="layui-elem-field layui-field-title">
		<legend>先睹为快</legend>
	</fieldset>
	alert与msg是一样用法，展现也一样<br/>
	只是默认样式不一样，而且alert默认有按钮<br/>
	<a class="layui-btn msg" href="javascript:;">msg</a>
	<a class="layui-btn alert" href="javascript:;">alert</a>
	<a class="layui-btn msg_notitle" href="javascript:;">msg没标题</a>
	<a class="layui-btn alert_notitle" href="javascript:;">alert没标题</a>
	<a class="layui-btn msg_skin" href="javascript:;">msg+皮肤</a>
	<a class="layui-btn alert_skin" href="javascript:;">alert+皮肤</a>
	<br/>
	open方法，可以实现与alert与msg一样的样式和功能<br/>
	<a class="layui-btn open1" href="javascript:;" style="_display:none;">open1捕获页</a>
	<a class="layui-btn open2" href="javascript:;">open2页面层</a>
	<a class="layui-btn open3" href="javascript:;">open3自定页</a>
	<a class="layui-btn iframe2" href="javascript:;">open iframe2层</a>
	<a class="layui-btn iframe1" href="javascript:;">open iframe1窗</a>
	<br/>
	加载与提示<br/>
	<a class="layui-btn loading1" href="javascript:;">loading1加载层</a>
	<a class="layui-btn loading2" href="javascript:;">loading2层</a>
	<a class="layui-btn tips" href="javascript:;">小tips</a>
	<br/>
	其他弹出层<br/>
	<a class="layui-btn prompt" href="javascript:;">prompt层</a>
	<a class="layui-btn confirm" href="javascript:;">confirm询问框</a>
	<a class="layui-btn tab" href="javascript:;">tab层</a>
	<a class="layui-btn photos" href="javascript:;">相册层</a>
</div>
<script>
	layer.msg('内容');
	$('.msg').on('click', function () {
		layer.msg('内容', {
			//btn: ['明白了', '知道了']
		});
	});
	$('.alert').on('click', function () {
		layer.alert('内容');
	});
	$('.alert_notitle').on('click', function () {
		layer.alert('内容', {
			title: false
		});
	});
	$('.msg_notitle').on('click', function () {
		layer.msg('内容', {
			title: false
		});
	});
	$('.alert_skin').on('click', function () {
		//第三方扩展皮肤
		layer.alert('内容', {
			icon: 8, // icon:1-8
			shadeClose: true,
			btn: ['明白了', '知道了'],
			anim: 4, //动画类型
			title: '标题名称，不存在为 false', // 标题 false,或者标题名称
			skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
			//skin: 'layui-layer-lan'
			//skin: 'layui-layer-molv' //样式类名
		})
	});
	$('.msg_skin').on('click', function () {
		//第三方扩展皮肤
		layer.msg('内容', {
			icon: 8, // icon:1-8
			shadeClose: true,
			btn: ['明白了', '知道了'],
			anim: 4, //动画类型
			title: '标题名称，不存在为 false', // 标题 false,或者标题名称
			skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
			//skin: 'layui-layer-lan'
			//skin: 'layui-layer-molv' //样式类名
		})
	});

	//iframe层
	$('.alert').on('click', function () {
		layer.alert('内容');
	});
	$('.iframe2').on('click', function () {
		layer.open({
			type: 2,
			title: 'layer mobile页',
			shadeClose: true,
			shade: 0.8,
			area: ['380px', '90%'],
			content: 'http://layer.layui.com/mobile/' //iframe的url
		});
	});


	//捕获页
	$('.open1').on('click', function () {
		layer.open({
			type: 1,
			shade: false,
			title: false, //不显示标题
			content: $('.demolist'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
			cancel: function () {
				layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 6});
			}
		});
	});

	//页面层
	$('.open2').on('click', function () {
		layer.open({
			type: 1,
			skin: 'layui-layer-rim', //加上边框
			area: ['420px', '240px'], //宽高
			content: '<div style="padding: 10px;">任意html内容</div>'
		});
	});

	//自定页
	$('.open3').on('click', function () {
		layer.open({
			type: 1,
			skin: 'layui-layer-demo', //样式类名
			closeBtn: false,
			area: '350px',
			anim: 2,
			shadeClose: true,
			content: '<div style="padding:20px;">即传入skin:"样式名"，然后你就可以为所欲为了。<br>你怎么样给她整容都行<br><br><br>我是华丽的酱油==。</div>'
		});
	});


	//iframe窗
	$('.iframe1').on('click', function () {
		layer.open({
			type: 2,
			title: false,
			closeBtn: 0, //不显示关闭按钮
			shade: [0],
			area: ['340px', '215px'],
			offset: 'rb', //右下角弹出
			time: 2000, //2秒后自动关闭
			anim: 2,
			content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
			end: function () { //此处用于演示
				layer.open({
					type: 2,
					title: '很多时候，我们想最大化看，比如像这个页面。',
					shadeClose: true,
					shade: false,
					maxmin: true, //开启最大化最小化按钮
					area: ['893px', '600px'],
					content: 'http://fly.layui.com/'
				});
			}
		});
	});


	//加载层
	$('.loading1').on('click', function () {
		var index = layer.load(0, { //0代表加载的风格，支持0-2
			shade: false,
			time: 1000
		});
	});

	//loading层
	$('.loading2').on('click', function () {
		var index = layer.load(1, {
			shade: [0.1, '#fff'], //0.1透明度的白色背景
			time: 1000
		});
	});


	//小tips
	$('.tips').on('click', function () {
		layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {  // 吸附元素选择器  .tips
			tips: [1, '#3595CC'],
			//btn: ['明白了', '知道了'],
			//title: '标题名称，不存在为 false', // 标题 false,或者标题名称
			time: 4000
		});
	});
	//prompt层
	$('.prompt').on('click', function () {
		/*//加载层
		var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
		//loading层
		var index = layer.load(1, {
		  shade: [0.1,'#fff'] //0.1透明度的白色背景
		});	*/
		var index = $(this).index();
		layer.prompt({title: '输入任何口令，并确认', formType: 1}, function (pass, index) {
			layer.close(index);
			layer.prompt({title: '随便写点啥，并确认', formType: 2}, function (text, index) {
				layer.close(index);
				layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
			});
		});
	});
	//tab层
	$('.tab').on('click', function () {
		layer.tab({
			area: ['600px', '300px'],
			tab: [{
				title: 'TAB1',
				content: '内容1'
			}, {
				title: 'TAB2',
				content: '内容2'
			}, {
				title: 'TAB3',
				content: '内容3'
			}]
		});
	});

	//相册层
	$('.photos').on('click', function () {
		$.getJSON('http://layer.layui.com/test/photos.json?v=' + new Date, function (json) {
			layer.photos({
				photos: json //格式见API文档手册页
				, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
			});
		});
	});


	//询问框
	$('.confirm').on('click', function () {
		layer.confirm('您是如何看待前端开发？', {
			btn: ['重要', '奇葩'] //按钮
		}, function () {
			layer.msg('的确很重要', {icon: 1});
		}, function () {
			layer.msg('也可以这样', {
				time: 20000, //20s后自动关闭
				btn: ['明白了', '知道了']
			});
		});
	});

</script>


<br/>
<br/>
<br/>
<br/>
<fieldset class="layui-elem-field layui-field-title">
	<legend>其他一些操作</legend>
</fieldset>
<ul class="clearfix demolist">
	<li class="layer-area">
		<div>信息框</div>
		<a class="layui-btn" id="msg" href="javascript:;">msg询问框</a>
		<a class="layui-btn" id="msg2" href="javascript:;">msg带动画</a>
		<a class="layui-btn" id="msg3" href="javascript:;">msg关闭后动作</a>
		<a class="layui-btn" id="msg4" href="javascript:;">msg带加载图标</a>
		<a class="layui-btn" id="msg5" href="javascript:;">msg正上方</a>
	</li>

	<li class="layer-area">
		<div>open页面层/iframe层</div>
		<a class="layui-btn" id="open1" href="javascript:;">页面层-自定义</a>
		<a class="layui-btn" id="open2" href="javascript:;">页面层-佟丽娅</a>
		<a class="layui-btn" id="open3" href="javascript:;" id="parentIframe">iframe-子父操作</a>
		<a class="layui-btn" id="open4" href="javascript:;">iframe-多媒体</a>
		<a class="layui-btn" id="open5" href="javascript:;">iframe-禁滚动条</a>
		<a class="layui-btn" id="open6" href="javascript:;">屏蔽浏览器滚动条</a>
		<a class="layui-btn" id="open7" href="javascript:;">弹出即全屏</a>
	</li>


	<li class="layer-area">
		<div>tips层</div>
		<a class="layui-btn" id="tips1" href="javascript:;">上</a>
		<a class="layui-btn" id="tips2" href="javascript:;">右</a>
		<a class="layui-btn" id="tips3" href="javascript:;">下</a>
		<a class="layui-btn" id="tips4" href="javascript:;">左</a>
		<a class="layui-btn" id="tips5" href="javascript:;">允许多个</a>
	</li>

	<li class="layer-area">
		<div>其它演示</div>
		<a class="layui-btn" id="prompt" href="javascript:;">默认prompt</a>
	</li>
</ul>

<script>
	// msg 询问层
	$('#msg').on('click', function () {
		layer.msg('你确定你很帅么？', {
			time: 0 //不自动关闭
			, btn: ['必须啊', '丑到爆']
			, yes: function (index) {
				layer.close(index);
				layer.msg('雅蠛蝶 O.o', {
					icon: 6
					, time: 0
					, btn: ['嗷', '嗷', '嗷']
				});
			}
			, btn2: function (index) {
				layer.close(index);
				layer.msg('我的天啦', {
					icon: 6
					, time: 0
					, btn: ['嗷', '嗷', '嗷']
				});
			}
		});
	})
	// msg 带动画弹出
	$('#msg2').on('click', function () {
		layer.msg('内容', {
			time: 3000, //2秒后自动关闭
			anim: 1,
		});
	})
	// msg 关闭后动作
	$('#msg3').on('click', function () {
		layer.msg('内容', {
				time: 1000, //2秒后自动关闭
				anim: 1,
			},
			function () {
				//关闭后的操作
				layer.alert('我是关闭后弹出的');
			});
	})
	// msg 加载中
	$('#msg4').on('click', function () {
		layer.msg('加载中', {
			icon: 16 // 加载图标
			, shade: 0.01
		});
	})
	//正上方
	$('#msg5').on('click', function () {
		layer.msg('灵活运用offset', {
			offset: 't',
			anim: 6
		});
	})


	//页面层-自定义
	$('#open1').on('click', function () {
		layer.open({
			type: 1,
			title: false,
			closeBtn: 0,
			shadeClose: true,
			area: ['700px', '450px'],
			skin: 'yourclass',
			content: '自定义HTML内容'
		});
	})


	//页面层-佟丽娅
	$('#open2').on('click', function () {
		layer.open({
			type: 1,
			title: false,
			closeBtn: 0,
			area: '516px',
			skin: 'layui-layer-nobg', //没有背景色
			shadeClose: true,
			content: $('#tong')
		});
	})


	//iframe层-父子操作
	$('#open3').on('click', function () {
		layer.open({
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: true,
			content: 'http://layer.layui.com/test/iframe.html'
		});
	})


	//iframe层-多媒体
	$('#open4').on('click', function () {
		layer.open({
			type: 2,
			title: false,
			area: ['630px', '360px'],
			shade: 0.8,
			closeBtn: 0,
			shadeClose: true,
			content: 'http://player.youku.com/embed/XMjY3MzgzODg0'
		});
	})


	//iframe层-禁滚动条
	$('#open5').on('click', function () {
		layer.open({
			type: 2,
			area: ['360px', '500px'],
			skin: 'layui-layer-rim', //加上边框
			content: ['http://layer.layui.com/mobile/', 'no']
		});
	})
	//屏蔽浏览器滚动条
	$('#open6').on('click', function () {
		layer.open({
			content: '浏览器滚动条已锁，不能在滚动了',
			scrollbar: false
		});
	})

	//弹出即全屏
	$('#open7').on('click', function () {
		var index = layer.open({
			type: 2,
			content: 'http://layim.layui.com',
			area: ['320px', '195px'],
			maxmin: true
		});
		layer.full(index);
	})

	//tips层
	$('#tips1').on('click', function () {
		layer.tips('上', this, {
			tips: [1, '#000']
		});
	})
	$('#tips2').on('click', function () {
		layer.tips('默认就是向右的', this);
	})
	$('#tips3').on('click', function () {
		layer.tips('下', this, {
			tips: 3
		});
	})
	$('#tips4').on('click', function () {
		layer.tips('在很久很久以前，在很久很久以前，在很久很久以前……', this, {
			tips: [4, '#78BA32']
		});
	})
	$('#tips5').on('click', function () {
		layer.tips('不会销毁之前的', this, {tipsMore: true});
	})


	//默认prompt
	$('#prompt').on('click', function () {
		layer.prompt(function (val, index) {
			layer.msg('得到了' + val);
			layer.close(index);
		});
	})


	/*

	//默认prompt
	layer.prompt(function(val, index){
	  layer.msg('得到了'+val);
	  layer.close(index);
	});
	//屏蔽浏览器滚动条
	layer.open({
	  content: '浏览器滚动条已锁',
	  scrollbar: false
	});
	//弹出即全屏
	var index = layer.open({
	  type: 2,
	  content: 'http://layim.layui.com',
	  area: ['320px', '195px'],
	  maxmin: true
	});
	layer.full(index);
	//正上方
	layer.msg('灵活运用offset', {
	  offset: 't',
	  anim: 6
	});
	//更多例子
	layer.msg('Hi');
	*/
</script>
  
  